<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="Service.js"/>
<script>



  
  
</script>
<style>

.header{
	height:125px;

}

.banner{
	height:60%;
	background: #222222;
	padding:2px;
}

.banner .spanBox{
	float:right;
	color: white;
	text-align: right;
	margin:20px;
	
}

.banner .spanBox div{
	margin-right:75px;
}

.banner span {

	
}

.banner span img{
width:50px;
	height:50px;

}

.menuBar{
	height:40%;
	background:#4fc1e9;
}

.menuBar .links{
	float:right;
	margin-right:25px;
	margin-top:-40px;
	
	
}

.menuBar .links li{
	margin-left:30px;
	float:left;
	cursor:pointer;
	
}

.menuBar .links a{
	text-decoration: none !important;
	font-size:18px;
	color:white;
}

.menuBar .links a:active, .menuBar .links a:hover{
		color:#19374f;
}
	

.module{
	font-size:24px;
	color:white;
	padding-top:10px;
	padding-left: 50px;
}

.module img{
	width:35px;
	height:35px;
	margin-left:-40px;
	margin-top:-5px;
	margin-right:5px;
}


.logo{
	margin-left:50px;
	
}

.logoImg{
	float:right;
	margin-top:-47px;
	overflow: hidden;
	background:white;
	border-radius: 50%;
}

.overlay{

position: absolute;
height: auto;
min-width: 100%;
top:0;
left: 0;
background:black;
display: block;
z-index: 100;
opacity:0.8;
min-height:150%;
cursor:default;
}


.modal{

position: absolute;
height: auto;
min-width: 100%;
top:0;
left: 0;

display: block;
z-index: 101;

min-height:100%;
cursor:default;


}

.modalContent {
  width: 750px ;
  margin-left: auto ;
  margin-right: auto ;
  min-height:300px;
  max-height:500px;
  background:whitesmoke;
  opacity :1;
  margin-top:100px;
  padding:5px;
  -moz-border-radius:50px;
  border-radius:13px;	
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08);

	
	
}

body{
background:whitesmoke;


}

.dest input, .dest select{

text-transform:capitalize;

}

.floatRight{
margin-left : 0px;


}

.contentHolder{
overflow: hidden;
overflow-y: auto;
max-height: 70%;
}

.tag{

-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
background: #ACC721;
color: white;
font: 16px bold;
font-family: "Segoe UI", arial, sans-serif !important;
margin-top:11px;
float:left;
height:40px;
min-width:30%;

}

.tag p{

margin-top:6px;
float:left;

}

.tagRight{

margin-left:3px;
background:#004247;
width: 69%;

}

.tagRight input{

margin-left:85px !important;
width: 100px !important;
-moz-border-radius: 50px !important;
border-radius: 50px !important;
margin-top:-2px;
}

.tag p.divider{

margin-left:6px;
opacity:0.8;

}
.tag p input[checkbox]{

width: 22px !important;
height: 13px;
padding: 0;
margin: 0;
vertical-align: bottom;
position: relative;
top: -1px;
-moz-border-radius: 0px;
border-radius: 0px;

}

.tag p input, .tag p select{

width: 100px;
height: 13px;
padding: 0;
margin: 0;
vertical-align: bottom;
position: relative;
top: -1px;
-moz-border-radius: 0px;
border-radius: 0px;
margin-left:-20px;

}

.tag .inline{
line-height:20px;

}

.tag label{
	display: block;
padding-left: 65px;
text-indent: -15px;
margin-top: -32px;
}

.tagRight label{
	display: block;
padding-left: 0px;
text-indent: 20px;
margin-top: -32px;
}

.modalHeader{
background: #ACC721;
min-height: 30px;

border-top-right-radius: 13px;
border-top-left-radius: 13px;

border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;

-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);
}

.hide{
margin-right: 5px;
margin-top: 5px;
float:right; 
background:none; 
height: 20px;
width: 20px;

color:white;
border-radius: 10px;
font: 16px bold !important;
}

.labelHdr{

padding: 10px 50px;
background: #99cc33;
color: white;
font: 16px bold;
font-family: "Segoe UI", arial, sans-serif !important;
width:25%;

}

.remove{
cursor:pointer;
}

.sort{
cursor:move;
}

.page-header h1 {
font-family: "Segoe UI", arial, sans-serif;
font-size: 80px;
color: #fff;
font-weight: normal;
display: block;
float: left;

padding: 0px;
margin-left: 20px;
margin-top: 10px;
}

.page-header h1 small {
font-size: 20px;
color: #919191;
display: block;
line-height: 20px;

}

div.right {
    margin:10px 0px 0px 275px;
    width: 1057px;
	background:white;
}
div.sidebar {




position: absolute;
left: 0px;
top: 0px;
width: 235px;
padding: 0px 20px 0px 10px;
background: right top repeat-y #191818;

}

/* bordered navigation */

.sidebar{

margin-top: 140px;
margin-left: 8px;
max-height:	100%;
}

.navigation li img{

width: 30px;
padding: 0px 13px;
opacity: 0.5;
}

        .sidebar .navigation.bordered{width: 218px; margin: 0px 0px 20px; padding: 0px; list-style: none; display: block; float: left; border: 1px solid #1A1A1A; border-bottom: 0px; border-left: 0px;}
            .sidebar .navigation.bordered > li{position: relative; width: 220px; float: left; display: block;}
			.sidebar .navigation.bordered > li > a:hover{border-left: 3px solid #EA1F1F;}
                .sidebar .navigation.bordered > li > a{font-size: 16px; color: #C9C9C9; display: block; float: left; width: 220px; line-height: 16px; border-left: 3px solid #111;
                                                       border-bottom: 1px solid #1A1A1A; padding: 12px 8px 11px 7px; text-decoration: none; background: #222222; margin: 0px;}
                .sidebar .navigation.bordered > li > a:hover{color: #FFF;}
                
                .sidebar .navigation.bordered > li .open{width: 40px; height: 40px; position: absolute; right: 0px; top: 0px; background: #222222; 
                                                 border: 1px solid #1A1A1A; border-width: 0px 0px 1px 1px; cursor: pointer; background: url('../img/navb_plus.png') center center no-repeat;}
                .sidebar .navigation.bordered > li .open:hover{background: url('../img/navb_plus.png') center center no-repeat #191818;}
                    .sidebar .navigation.bordered > li.active .open{border-bottom-color: #191818; background: url('../img/navb_minus.png') center center no-repeat #191818;}
                
                .sidebar .navigation.bordered li ul{width: 220px; max-height: 0px; overflow-y: hidden; overflow-x: hidden; float: left; list-style: none; padding: 0px; margin: 0px; background: transparent;}
                .sidebar .navigation.bordered li.active ul{max-height: 500px; -webkit-transition: max-height 200ms ease-in-out; -moz-transition: max-height 200ms ease-in-out; -o-transition: max-height 200ms ease-in-out; transition: max-height 200ms ease-in-out;}
                
                    .sidebar .navigation.bordered li ul > li{position: relative; width: 220px; float: left; display: block; margin: 0px;}
                        .sidebar .navigation.bordered li ul > li a{font-size: 14px; line-height: 16px; padding: 10px 8px 9px 17px; text-decoration: none; display: block;
                                                           float: left; border-bottom: 1px solid #1A1A1A; width: 220px; color: #C9C9C9; border-left: 3px solid #222;}
                        .sidebar .navigation.bordered li ul > li a:hover,
                        .sidebar .navigation.bordered li ul > li.active a{background: transparent; color: #FFF;}                        
        /* eof bordered navigation */
		
div.box {
    border:1px dashed #808080;
	padding:5px;
	-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.08);
}
div.attribute_element {
    width:auto;
    min-height:100px;
	padding :10px;
	padding-bottom :50px;
	margin-bottom: 50px;
	background: whitesmoke;
}
div.dropDownElement, div.checkBoxElement, div.labelElement, div.numericElement , div.decimalElement , div.charElement , div.boolElement , div.alphaNumElement   {
    min-height: 35px;
	width:90% !important;
	font: 10px bold;
	padding : 10px;
	margin-top:5px;
	margin-bottom:50px;
	background: white;
}
div.child2 {
    width:20px;
    height:20px;
}
div.dest {
    border: 1px dashed #808080;
max-height: 420px;
padding: 10px;
height: 420px;
overflow:hidden;
overflow-y:auto;
}
.leftNav{
width:100%;

}



.leftNav li {
width:100%;
list-style: none;
background: rgb(126, 126, 126);
color: white;
padding: 5px;
margin-bottom: 2px;
}

.attribute_element input{
    height: 30px;
width:100%;

	font: 20px bold;
	padding : 10px;
	
}
.serviceElement{
margin-bottom:10px;

}

.serviceElement div{
    height: 50px;

	font: 20px bold;
	
	border: 2px inset;
	
}

.serviceElement .serviceDesc{
margin-top: 0;
border: none;
width: 95%;
font: 20px bold;
height: 100%;
padding: 10px;
}

.serviceElement input{
	
}

.serviceElementHdr{

height:50px;
margin-left:240px;



}

.serviceElementHdr select{

	height:41px;
	font:20px bold;
	margin:5px;
	margin-left:5px;
	width:136px;
}

div.dropDownElement input, div.checkBoxElement input, div.labelElement input, div.numericElement input, div.decimalElement input, div.charElement input, div.boolElement input, div.alphaNumElement input {
    height: 30px;
width:80%;


	font: 20px bold;
	padding : 10px;
	margin-bottom:5px;
}

.dropDownElement, .checkBoxElement, labelElement, numericElement, decimalElement, charElement, boolElement, alphaNumElement  {
    
	width:70% !important; 

	font: 20px bold !important;
	padding-left:5px;
	
}

.dropDownElement div, .checkBoxElement div{

z-index:50;
		width:80%;

}

labelElement div, numericElement div, decimalElement div, charElement div, boolElement div, alphaNumElement div{

		float:left;
		z-index:50;
		width:80%;

}

.div.remove, .div.hide{
float:none !important; 
background:grey; 
height: 20px;
width: 20px;

color:white;

font: 16px bold !important;


}

.remove{
float:right; 
background:grey; 
height: 20px;
width: 20px;

color:white;
font: 16px bold !important;


}

.button{

padding:10px; 
background:#99cc33; 
color:white; 
font: 16px bold; 
cursor:pointer;
width:50px;
float:right;
margin-left:20px;

}


.addElement{

margin-left:20px; 
padding:10px; 
background:#004247; 
color:white; 
font: 16px bold; 
cursor:pointer;
	}
	
	.chkBox input[type=checkbox]{
			width:20px;
			height:20px;
			float:left;
	}
	
	.headers{
	z-index:99;
	
	height:200px;
	position:fixed;
	top:0px;
	left:0px;
	}

	.modal label{
	
	color: black;
font: 16px bold;
font-family: "Segoe UI", arial, sans-serif !important;
	
	}
	
	.modal p{
	
	float:left;margin-right:10px;
	}
	
	.modal input, .modal select {
	border:2px inset;
	width:135px !important;
	border-radius:0px !important;
	-moz-border-radius:0px !important;
	max-width:135px;
	padding:5px 0px;
	margin-left:5px;
	}
	
	.modal fieldset{
	
	
	margin-top:5px;
	border-radius:10px !important;
	-moz-border-radius:10px !important;
	background:white;
	opacity:0.8;
	
	}
	
	.scroller{
	width:100%;
	overflow:auto;
	max-height:350px;
	}
	
	.limitSize{
	
	
	margin:10px;
	width:62px;
	
	}
	

</style>

<script>



$(function () {

$( ".dest" ).sortable({items: ".attribute_element", cancel: ".attribute_element .fixedObj"});
    $(".dest" ).disableSelection();
	
	
	
	$('body').on('click','input',function( event ) {
 
  $(this).focus();
});

$('body').on('click','.hide',function( event ) {
 
  $(this).parent().parent().parent().attr('style','display:none;');
  
  $('.overlay').attr('style','display:none;');
});


/*
	$('body').on('click','.required',function( event ) {
 
	var dialog=$(this).closest('.box').find('.requiredWhen:first');
 
  if($(this).is(':checked')){
  
  modalPanel($(dialog).parent());
  
  $('.overlay').attr('style','display:block;');
  
  $(dialog).attr('style','display:block;');
  
  }else{
  
 // $(dialog).find('.modal').remove();
  
  }
});


$('body').on('click','.readonly',function( event ) {
 
	var dialog=$(this).closest('.box').find('.readonlyWhen:first');
 
  if($(this).is(':checked')){
  
  modalPanel($(dialog).parent());
  
  $('.overlay').attr('style','display:block;');
  
  $(dialog).attr('style','display:block;');
  
  }else{
  
 // $(dialog).find('.modal').remove();
  
  }
});
	
*/
	
	
	$('body').on('click','.remove',function(){

$(this).parent().remove();
});

$('body').on('click','.addDropDown',function(){

$(this).parent().append('<div><input type="text" class="dropDownElementList"/><span class="div remove">&nbsp;X&nbsp;</span></div>');
});


$('body').on('click','.addCondition',function(){

$(this).closest('.modal').find('.scroller').append(addCondition($(this).closest('.box')));
});




    $('.attribute,.attrChild,.child2').draggable({
        revert: true
    });
    $('.dest').droppable({
        accept: '.attribute',
        drop: function (event, ui) {
            $newElt = $('<div class="attribute_element box sort"><span class="remove">&nbsp;X</span><div  class="fixedObj" style="width:97%;"><input type="text" class="attributeDesc" placeholder="Enter attribute description" class="cancel"/></div></div>');
            $newElt.appendTo(this);
            $newElt.droppable({
                accept: '.attrChild',
                drop: function (event, ui) {
				
	
	$(".attribute_element" ).sortable({items: ".sort", cancel: "div .fixedObj"});
    $(".attribute_element .cancel" ).disableSelection();
	
	
				
				if($(ui.draggable).hasClass('dropDown')){
				
                    $newtSubElt = $('<div class="dropDownElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Dropdown" class="aspectDesc desc"/><span class="addElement addDropDown">Add Element</span></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    $newtSubElt.droppable({
                        accept: '.child2',
                        drop: function (event, ui) {
                            $('<div class="child2 box"></div>').appendTo(this);
                        }
                    });
                } else if($(ui.draggable).hasClass('checkBox')){
				
                    $newtSubElt = $('<div class="checkBoxElement box sort aspectItem"><span class="remove">&nbsp;X</span><div class="chkBox"><input type="checkbox" disabled="disabled"/><input  class="desc" type="text"  class="desc" placeholder="Enter description for Checkbox"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('label')){
				
                    $newtSubElt = $('<div class="labelElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text class="desc"  placeholder="Enter Label"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('numeric')){
				
                    $newtSubElt = $('<div class="numericElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Numeric Input Field"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('decimal')){
				
                    $newtSubElt = $('<div class="decimalElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Decimal Input Field"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('alphaNum')){
				
                    $newtSubElt = $('<div class="alphaNumElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc"  placeholder="Enter description for Alpha-Numeric Input Field"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                } else if($(ui.draggable).hasClass('char')){
				
                    $newtSubElt = $('<div class="charElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc aspectDesc" placeholder="Enter description for Character Input Field"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span><div class="dialogForm requiredWhen" title="Required When"  style="display:none;"></div><div class="dialogForm readOnlyWhen" title="Readonly When"  style="display:none;"></div></div>');
                    $newtSubElt.appendTo(this);
					
                    
                } else if($(ui.draggable).hasClass('bool')){
				
                    $newtSubElt = $('<div class="boolElement box sort aspectItem"><span class="remove">&nbsp;X</span><div><input type="text" class="desc aspectDesc"  placeholder="Enter description for Boolean Input Field"/></div><span class="tag"><p><input  class="required"  type="checkbox"/><label>Required</label></p> <p><input  class="readonly" type="checkbox"/><label>Read-Only</label></p></span><span class="tagRight tag"><p><input type="text" class="default" maxlength="1"/><label>Default</label></p></span></div>');
                    $newtSubElt.appendTo(this);
                    
                }
				
				modalPanel(this);
				
				}
            });
        }
    });
    
    
});
</script>

</head>

<body>
<div class="header">
	
		<div class="banner">
			<div class="logo"><img src="img/logo.png"/><span class="spanBox"><div>Firstname Lastname</div><div>Administrator</div><span class="logoImg"><img src="img/user.png"/></span> </span></div>
		</div>
		<div class="menuBar">
		
			<div class="module"><span class="floatLeft"><img src="img\menu.png"/></span>Services Management</div>
			<span class="links">
			<div>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Create</a></li>
					<li><a href="#">Manage</a></li>
					<li><a href="#">Audit</a></li>
					<li><a href="#">Workflow</a></li>
				</ul>
				</div>
			</span>
		
		</div>
	</div>
<div style="background:#191818;padding:25px;height:30px;padding-top: 5px;"><div class="serviceElementHdr">
	<span class="floatRight">
	<span class="labelHdr">Level</span>
	<select id="level">
	<option value="CU">Credit Union</option>
	<option value="SP">Sys-Prin</option>
	</select>
	
	<span class="labelHdr">Type</span>
	<select id="type">
	<option value="SER">Service</option>
	<option value="SOL">Solution</option>
	</select>
	
	</span>
	
	<span style="float: right;
margin-top: 15px;">
	<span class="labelHdr" id="parse">Validate</span>
	<span class="labelHdr" id="parse">Parse</span>
	</span>
	
	
	
	</div></div>	
<div class="contentHolder">
<div class="right">
    <div class="dest">
	
	
	
	<div class="serviceElement fixedObj">
	
	
	
	<div>
	
	
	
	
	<input class="serviceDesc" type="text" placeholder="Enter Service/Solution Name"/>
	
	</div></div>
	
	</div>
	
	
	
	
</div>

<div class="sidebar">
	<div class="leftContentHolder">
			<ul class="navigation bordered">
				<li class="attribute box "><a><div><span><img src="img\yesNo.png"/></span>Attribute</div></a></li>
				
				<li class="dropDown box attrChild"><a><div><span><img src="img\dropdown.png"/></span>Dropdown</div></a></li>
				<li class="checkBox box attrChild"><a><div><span><img src="img\chk.png"/></span>Checkbox</div></a></li>
				<li class="label box attrChild"><a><div><span><img src="img\label.png"/></span>Label</div></a></li>
				<li class="numeric box attrChild"><a><div><span><img src="img\numeric.png"/></span>Numeric</div></a></li>
				<li class="decimal box attrChild"><a><div><span><img src="img\decimal.png"/></span>Decimal</div></a></li>
				<li class="alphaNum box attrChild"><a><div><span><img src="img\alpnum.png"/></span>Alpha Numeric</div></a></li>
				<li class="char box attrChild"><a><div><span><img src="img\alpha.png"/></span>Character</div></a></li>
				<li class="bool box attrChild"><a><div><span><img src="img\yesNo.png"/></span>Boolean</div></a></li>
	
			</ul>
		</div>
	</div>
	
</div>	
<!--<div class="sidebar" style="margin-top:250px;">
<div style="background: #99cc33;
min-height: 10px;
margin-left: -11px;
width: 113%;"></div>


    <ul class="navigation bordered">
	<li class="attribute box attrChild"><a><span><img src="img\yesNo.png"/></span>Attribute</a></li>
    <li class="dropDown box attrChild"><a>Drop Down</a></li>
	<li class="checkBox box attrChild"><a>Checkbox</a></li>
	<li class="label box attrChild"><a>Label</a></li>
    <li class="numeric box attrChild"><a>Numeric</a></li>
	<li class="decimal box attrChild"><a>Decimal</a></li>
	<li class="alphaNum box attrChild"><a>Alpha Numeric</a></li>
	<li class="char box attrChild"><a>Character</a></li>
	<li class="bool box attrChild"><a>Boolean</a></li>
	
	</ul>
</div>-->

<div id="op" class="right" />
<div class="overlay" style="display:none;"/>
</body>
<script src="ServiceObj.js"></script>
<script src="parser.js"/></script>

</html>